import { Box, Button, Divider, Paper, Typography } from "@mui/material";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useSnackbar } from "notistack";
import React, { useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserProContext } from "../../../App";
import ConfirmDialog from "../../../components/ConfirmDialog";
import FindFail from "../../../components/FindFail";
import Loading from "../../../components/loading";
import { BLOG_URL, DELETE_BLOG_URL } from "../../../constants/url";
import { getQueryFn } from "../../../query/getQueryFn";
import { postQueryFn } from "../../../query/postQueryFn";
import useDelBlog from "../../../query/useDelBlog";
import "./UserPage.css";
export default function Passage(props) {
  const [confirm, setConfirm] = useState(false);
  const [delId, setdelId] = useState();
  const { data, isSuccess, isLoading, isError, mutate } = useMutation(
    ["getblog"],
    postQueryFn
  );
  useEffect(() => {
    mutate({
      method: "get",
      Key: [BLOG_URL, { useToken: true, params: props.params ?? {} }],
    });
  }, [props.params]);

  const navigate = useNavigate();
  const handleEditor = (e) => {
    //
    navigate("/student/homepage/blogeditor/" + e);
  };
  const handleDetail = (e) => {
    navigate("/student/homepage/blogdetail/" + e);
  };
  const userPro = useContext(UserProContext);
  const {
    isSuccess: delSuccess,
    isLoading: delLoading,
    mutate: delMutate,
  } = useDelBlog();
  const deleteBlog = (e) => {
    setConfirm(true);
    setdelId(e);
  };
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    if (delSuccess) {
      enqueueSnackbar("删除成功", { variant: "success" });
      mutate({
        method: "get",
        Key: [BLOG_URL, { useToken: true, params: props.params ?? {} }],
      });
    }
  }, [delSuccess]);

  const handleCancel = () => {
    //取消删除
    setConfirm(false);
    setdelId(null);
  };
  const handleConfirm = () => {
    //确认删除函数
    setConfirm(false);
    delMutate({ url: DELETE_BLOG_URL + delId });
  };

  return (
    <div>
      <ConfirmDialog
        open={confirm}
        handleClose={handleCancel}
        handleConfirm={handleConfirm}
        text={"你确定要删除这篇博文吗?删除后不可恢复"}
      />
      {/* {isLoading && <Loading />} */}
      {isSuccess && (
        <Box className={props.class ?? "Blog"}>
          {data.data.data.length === 0 && <FindFail text="一篇博文都找不到" />}
          {data.data.data.map((value, key) => {
            return (
              <Paper
                key={key}
                elevation="4"
                sx={{
                  marginBottom: "20px",
                  padding: "10px 20px",
                  height: "100%",
                }}
              >
                <Box sx={{ display: "flex", flexDirection: "row" }}>
                  <Typography variant="h5">{value.title}</Typography>
                  <Box sx={{ flexGrow: 1 }} />

                  {value.name == userPro.userPro.name && (
                    <Button color="error" onClick={() => deleteBlog(value.id)}>
                      删除
                    </Button>
                  )}
                  {value.name == userPro.userPro.name && (
                    <Button onClick={() => handleEditor(value.id)}>编辑</Button>
                  )}

                  <Button onClick={() => handleDetail(value.id)}>
                    阅读全文
                  </Button>
                </Box>
                <Divider sx={{ margin: "10px 0" }} />
                <Box sx={{ maxHeight: "98px", overflow: "hidden" }}>
                  <Typography sx={{ marginLeft: "10px" }} variant="body">
                    {value.content}
                  </Typography>
                </Box>
                <Divider sx={{ margin: "10px 0" }} />
                <Box>
                  <Typography sx={{ opacity: 0.6 }}>
                    {props.showName ? value.name : "我"} 发表于{value.time}
                  </Typography>
                </Box>
              </Paper>
            );
          })}
        </Box>
      )}
      {isLoading && <Loading />}
    </div>
  );
}
